<template>
  <div id="articleConfig">
    <span class="articleTitle">文章配置列表</span>
    <!-- 搜索 -->
    <topSearch @toSearch="toSearch"></topSearch>
    <!-- 操作按钮部分 -->
    <div class="table-conBtn">
      <el-button type="warning" @click="addRelease('MEDIA')"
        >发布媒体报道</el-button
      >
      <el-button type="warning" @click="addRelease('ARTICLE')"
        >发布学员故事</el-button
      >
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table :data="tableData" v-loading="loading">
      <el-table-column label="序号" type="index" width="180" align="center">
      </el-table-column>
      <el-table-column
        prop="updateByName"
        label="发布人"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="createdTime"
        label="操作时间"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="title"
        label="文章标题"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column label="展示模块" min-width="100" align="center">
        <template slot-scope="{ row }">
          <el-tag :type="row.modular === 'MEDIA' ? '' : 'warning'">
            {{ row.modular | filterName('about-us-modular') }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="排列序号" min-width="100" align="center">
        <template slot-scope="{ row }">
          <el-tag :type="row.modular === 'MEDIA' ? '' : 'warning'">
            {{ row.sort }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="发布状态" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.status === 'OPEN'" class="tag-span primary"
            >已发布</span
          >
          <span v-else class="tag-span">未发布</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="180" align="center">
        <template slot-scope="{ row }">
          <el-button
            v-if="row.status === 'OPEN'"
            type="text"
            @click="handleStatus(row.id)"
          >
            下架
          </el-button>
          <el-button v-else type="text" @click="handleStatus(row.id)">
            发布
          </el-button>
          <el-button type="text" @click="toPreview(row)">
            查看预览
          </el-button>
          <el-button
            type="text"
            :disabled="disabledEdit(row)"
            :style="{ color: disabledEdit(row) ? '#8B8B7A' : '' }"
            @click="toEdit(row)"
          >
            开始编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 媒体报道 -->
    <mediaReportsDialog
      v-if="mediaReportsDialogData.isShow"
      :mediaReportsDialogData="mediaReportsDialogData"
      @refresh="refresh"
    ></mediaReportsDialog>
    <!-- 学员故事 -->
    <studentsStoryDialog
      v-if="studentsStoryDialogData.isShow"
      :studentsStoryDialogData="studentsStoryDialogData"
      @refresh="refresh"
    ></studentsStoryDialog>
    <!-- 查看编辑 -->
    <previewDialog
      v-if="previewDialogData.isShow"
      :previewDialogData="previewDialogData"
      @previewToEdit="previewToEdit"
    ></previewDialog>
  </div>
</template>
<script>
import topSearch from './topSearch'
import mediaReportsDialog from '../../common/mediaReportsDialog'
import studentsStoryDialog from '../../common/studentsStoryDialog'
import previewDialog from '../../common/previewDialog'
import { getArticleList, editStatus } from '@/api/brandManage/aboutUs'
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { disabledEdit } from '../../dpInfoDesk/types'
export default {
  components: {
    topSearch,
    mediaReportsDialog,
    studentsStoryDialog,
    previewDialog
  },
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      searchParams: {
        pageNum: 1,
        pageSize: 10,
        source: 'about_us'
      },
      mediaReportsDialogData: {
        isShow: false
      },
      studentsStoryDialogData: {
        isShow: false
      },
      previewDialogData: {
        isShow: false
      }
    }
  },
  async mounted() {
    await sysNormalDisable('about-us-modular', 'about-us-modular')
    this.searchList()
  },
  methods: {
    disabledEdit,
    /* 列表 */
    searchList() {
      getArticleList(this.searchParams, (res) => {
        this.tableData = res.rows
        this.total = res.total
      })
    },
    //搜索
    toSearch(val) {
      this.searchParams.pageNum = 1
      Object.assign(this.searchParams, val)
      this.searchList()
    },
    /* 修改状态 */
    handleStatus(id) {
      editStatus({ id }, () => {
        this.searchList()
        this.$message.success('状态修改成功')
      })
    },
    /* 新增发布 */
    addRelease(modular) {
      if (modular === 'MEDIA')
        this.mediaReportsDialogData = { isShow: true, source: 'about_us' }
      else
        this.studentsStoryDialogData = {
          isShow: true,
          modular,
          source: 'about_us'
        }
    },
    /* 编辑发布 */
    toEdit({ id, modular }) {
      if (modular === 'MEDIA') {
        this.mediaReportsDialogData = { isShow: true, id }
      } else {
        this.studentsStoryDialogData = { isShow: true, id, modular }
      }
    },
    /* 查看编辑 */
    toPreview({ id, modular }) {
      if (modular === 'MEDIA') {
        this.previewDialogData = { isShow: true, id }
      } else {
        const previewLink = `${process.env.VUE_APP_MAIN_URL}page/about/student-story/list-details?id=${id}&isView=1`
        window.open(previewLink)
      }
    },
    /* 预览去修改 */
    previewToEdit(id) {
      this.mediaReportsDialogData = { isShow: true, id }
    },
    /* 新增编辑刷新列表 */
    refresh() {
      this.searchList()
    }
  }
}
</script>
<style lang="less" scoped>
#articleConfig {
  margin-top: 30px;
  .articleTitle {
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    margin-left: 30px;
  }
  .mediaModular {
    color: #000;
    background-color: rgb(152, 224, 255);
  }
  .storyModular {
    color: #000;
    background-color: rgb(255, 215, 167);
  }
}
</style>
